<template>
  <div class="map-container">
    <baidu-map
      :style="{width: map.width, height: map.height}"
      :ak="map.ak"
      :zoom="map.zoom"
      :center="{lng: map.center.lng, lat: map.center.lat}"
      :scroll-wheel-zoom="true"
    >
      <!--动态添加的点坐标-->
      <bm-marker
        v-for="(marker,index) of markers"
        :key="index"
        :position="{lng: marker.lng, lat: marker.lat}"
        :icon="marker.markerIcon"
        @click="infoWindowOpen(index, marker)"
      >
      <!-- 信息窗口 -->
        <bm-info-window
          :show="marker.show"
          @close="infoWindowClose(index, marker)"
          @open="infoWindowOpen(index, marker)"
        >
          <slot></slot>
        </bm-info-window>
        <!-- 标签 -->
        <div v-if="marker.labelShow">
          <bm-label :content="marker.content" :labelStyle="{color: marker.color, fontSize : '12px',backgroundColor:marker.backgroundColor,border:'0',zIndex:1}"  :offset="{width: 4, height: 7}"/>
        </div>

      </bm-marker>
      <!--比例尺控件-->
      <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
      <!--缩放控件-->
      <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
    </baidu-map>
  </div>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BmScale from 'vue-baidu-map/components/controls/Scale'
import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
import BmMarker from 'vue-baidu-map/components/overlays/Marker'
import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'
import BmLabel from 'vue-baidu-map/components/overlays/Label'
import './infoWindow.css'
export default {
  name: 'infoWindow',
  props: {
  	map: {
  		type: Object,
  		default () {
  			return {
		        center: {
		          lng: 116.402544,
		          lat: 39.912057,
		        },
		        zoom: 10,
		        width: '100%',
		        height: '100%',
		     };
  		}
  	},
  	markers: {
  		Array,
	  	default () {
	  		return [];
	  	}
  	}
  },
  components: {
    BaiduMap,
	  BmScale,
	  BmNavigation,
	  BmMarker,
	  BmInfoWindow,
    BmLabel
  },
  data() {
    return {};
  },
  watch: {
    map: {
    	handler (newVal) {
    		this.map = newVal;
    	},
    	deep: true,
    },
  },
  methods: {
    infoWindowOpen (index, marker) {//打开窗口
      marker.show = true;
      this.$set(this.markers, index, marker);
      this.$emit("on-change",marker);
    },
    infoWindowClose (index, marker) {//关闭窗口
      marker.show = false;
      this.$set(this.markers, index, marker);
    },
    markerAddAttr () {//添加默认值：标记点图标、show显示隐藏控制属性
      console.log('-------------------')
      this.markers.map((item, index) => {
        console.log(item)
        item = Object.assign({
          ... !item.markerIcon && {markerIcon: {
              url: 'http://api0.map.bdimg.com/images/marker_red_sprite.png',
              size: {
                width: 30,
                height: 40
              }
            }
          },
          ... !item.show && {show: index <= 0},
        }, item);
        this.$set(this.markers, index, item);
      })
    },
  },
  created() {
    this.markerAddAttr();
  }
}
</script>

<style lang="css">
.BMap_cpyCtrl {
  display: none !important;
}
.anchorBL {
  display: none !important;
}
.map-container{
  height: 100%;
}
</style>
